<script setup>
import {EXPERIENCE_SECTION_INFO} from "@public/config.js";
import {useI18n} from "vue-i18n";

const { t } = useI18n();
</script>

<template>
    <div id="experience" class="experience-section section-container">
        <div class="experience-title section-title">{{ t('myExperience') }}</div>
        <div class="experience-container section-content">
            <div class="experience-item animation-fade-in-out" v-for="(item, index) in EXPERIENCE_SECTION_INFO" :key="index">
                <div class="experience-item-content surface-container">
                    <div class="experience-title">{{ t(item.title) }}</div>
                    <div class="experience-content">{{ t(item.title + 'Experience') }}</div>
                </div>
                <div class="experience-time">
                    <div>{{ item.time }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
#experience {
    padding-bottom: 7rem;
    color: var(--md-sys-color-on-surface-variant);

    .experience-container {
        flex-direction: column;
        position: relative;

        @media (max-width: 768px) {

            &::before {
                left: 1rem !important;
            }

            .experience-item {
                gap: .5rem !important;
                padding-left: 2rem;
                text-align: left !important;
                flex-direction: column-reverse !important;

                .experience-time {
                    width: 100% !important;
                    text-align: left !important;
                }

                .experience-item-content {
                    width: 100% !important;
                }
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;
            width: 4px;
            opacity: .8;
            background: var(--md-sys-color-outline);
        }

        .experience-item {
            margin-bottom: 2rem;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 5rem;
            position: relative;

            &:nth-child(odd) {
                flex-direction: row-reverse;

                .experience-time {
                    text-align: right;
                }
            }

            &-content {
                width: 45%;

                .experience-title {
                    font-size: 1rem;
                    font-weight: bolder;
                }

                .experience-content {
                    font-size: .8rem;
                    opacity: .7;
                }
            }

            .experience-time {
                width: 45%;
            }

            .surface-container {
                position: relative;
                padding: 1rem;
                border-radius: 8px;
                overflow: hidden;

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: var(--md-sys-color-surface-container-highest);
                    opacity: 0.3;
                }

                div {
                    z-index: 1;
                    position: inherit;
                }
            }
        }
    }
}
</style>
